CSS - 列表样式

发表于   |   分类于   |  

list-style-type 用于设定列表项的标记样式，有以下几个常用的值：

ul 值 说明
none 无标记
disc 默认值，实心圆点
circle 空心的圆点
square 实心的方块
ol 值 说明
none 无标记
decimal 默认，阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母 
1
2
3
4
5
<style media="screen">
ul li {
  list-style-type: none;
}
</style>

除了默认的几种样式，我们还可以使用图片来设定列表项的标记。

list-style-image

list-style-image 的值可以是 url(...) 和 none。

list-style-position

list-style-position 用以设定列表项标记图片的位置，常用属性有以下几种：

1
2
3
inside:列表项标记放置在文本以内，且环绕文本根据标记对齐。
outside:默认值，列表项放置在文本外，且环绕文本不根据标记对齐。

两者的区别是，inside 标记图片会占用列表项文字的文字，没有宽度限制，且列表项文字如果换行，以标记图片对齐；outside 标记图书使用预留位置，有宽度限制，列表项文字如果换行，以文字对齐。